[V0_FILE]typescriptreact:file="components/kokonutui/layout.tsx" isEdit="true" isMerged="true" "use client" import type { ReactNode } from "react" import Sidebar from "./sidebar" import TopNav from "./top-nav" import { useTheme } from "next-themes" import { useEffect, useState } from "react" interface LayoutProps { children: ReactNode } export default function Layout({ children }: LayoutProps) { const { theme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return (

{children}

) } [V0_FILE]typescriptreact:file="components/kokonutui/top-nav.tsx" isEdit="true" isMerged="true" "use client" import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import Image from "next/image" import { Bell, ChevronRight } from "lucide-react" import Profile01 from "./profile-01" import Link from "next/link" import { ThemeToggle } from "../theme-toggle" interface BreadcrumbItem { label: string href?: string } export default function TopNav() { const breadcrumbs: BreadcrumbItem[] = [ { label: "kokonutUI", href: "#" }, { label: "dashboard", href: "#" }, ] return ( ) } [V0_FILE]typescriptreact:file="components/kokonutui/sidebar.tsx" isMerged="true" "use client" import { BarChart2, Receipt, Building2, CreditCard, Folder, Wallet, Users2, Shield, MessagesSquare, Video, Settings, HelpCircle, Menu, } from "lucide-react" import { Home } from "lucide-react" import Link from "next/link" import { useState } from "react" import Image from "next/image" export default function Sidebar() { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) function handleNavigation() { setIsMobileMenuOpen(false) } function NavItem({ href, icon: Icon, children, }: { href: string icon: any children: React.ReactNode }) { return ( {children} ) } return ( <>

KokonutUI

Overview

Dashboard Analytics Organization Projects

Finance

Transactions Invoices Payments

Team

Members Permissions Chat Meetings

Settings Help

{isMobileMenuOpen && (

setIsMobileMenuOpen(false)} /> )} ) } [V0_FILE]typescriptreact:file="components/kokonutui/content.tsx" isMerged="true" import { Calendar, CreditCard, Wallet } from "lucide-react" import List01 from "./list-01" import List02 from "./list-02" import List03 from "./list-03" export default function () { return (

Accounts

Recent Transactions

Upcoming Events

) } [V0_FILE]typescriptreact:file="components/kokonutui/profile-01.tsx" isMerged="true" import { LogOut, MoveUpRight, Settings, CreditCard, FileText } from "lucide-react" import Image from "next/image" import Link from "next/link" interface MenuItem { label: string value?: string href: string icon?: React.ReactNode external?: boolean } interface Profile01Props { name: string role: string avatar: string subscription?: string } const defaultProfile = { name: "Eugene An", role: "Prompt Engineer", avatar: "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/avatar-02-albo9B0tWOSLXCVZh9rX9KFxXIVWMr.png", subscription: "Free Trial", } satisfies Required export default function Profile01({ name = defaultProfile.name, role = defaultProfile.role, avatar = defaultProfile.avatar, subscription = defaultProfile.subscription, }: Partial = defaultProfile) { const menuItems: MenuItem[] = [ { label: "Subscription", value: subscription, href: "#", icon: , external: false, }, { label: "Settings", href: "#", icon: , }, { label: "Terms & Policies", href: "#", icon: , external: true, }, ] return (

{/* Profile Info */}

{name}

{role}

{menuItems.map((item) => (

{item.icon} {item.label}

{item.value && {item.value}} {item.external && }

))}

) } [V0_FILE]typescriptreact:file="components/kokonutui/list-03.tsx" isMerged="true" import { cn } from "@/lib/utils" import { Calendar, type LucideIcon, ArrowRight, CheckCircle2, Timer, AlertCircle, PiggyBank, TrendingUp, CreditCard, } from "lucide-react" import React from "react" interface ListItem { id: string title: string subtitle: string icon: LucideIcon iconStyle: string date: string time?: string amount?: string status: "pending" | "in-progress" | "completed" progress?: number } interface List03Props { items?: ListItem[] className?: string } const iconStyles = { savings: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100", investment: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100", debt: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100", } const statusConfig = { pending: { icon: Timer, class: "text-amber-600 dark:text-amber-400", bg: "bg-amber-100 dark:bg-amber-900/30", }, "in-progress": { icon: AlertCircle, class: "text-blue-600 dark:text-blue-400", bg: "bg-blue-100 dark:bg-blue-900/30", }, completed: { icon: CheckCircle2, class: "text-emerald-600 dark:text-emerald-400", bg: "bg-emerald-100 dark:bg-emerald-900/30", }, } const ITEMS: ListItem[] = [ { id: "1", title: "Emergency Fund", subtitle: "3 months of expenses saved", icon: PiggyBank, iconStyle: "savings", date: "Target: Dec 2024", amount: "$15,000", status: "in-progress", progress: 65, }, { id: "2", title: "Stock Portfolio", subtitle: "Tech sector investment plan", icon: TrendingUp, iconStyle: "investment", date: "Target: Jun 2024", amount: "$50,000", status: "pending", progress: 30, }, { id: "3", title: "Debt Repayment", subtitle: "Student loan payoff plan", icon: CreditCard, iconStyle: "debt", date: "Target: Mar 2025", amount: "$25,000", status: "in-progress", progress: 45, }, ] export default function List03({ items = ITEMS, className }: List03Props) { return (

{items.map((item) => (

{React.createElement(statusConfig[item.status].icon, { className: "w-3.5 h-3.5" })} {item.status.charAt(0).toUpperCase() + item.status.slice(1)}

{item.title}

{item.subtitle}

{typeof item.progress === "number" && (

Progress {item.progress}%

)} {item.amount && (

{item.amount} target

)}

{item.date}

))}

) } [V0_FILE]typescriptreact:file="components/kokonutui/list-01.tsx" isMerged="true" import { cn } from "@/lib/utils" import { ArrowUpRight, ArrowDownLeft, Wallet, SendHorizontal, QrCode, Plus, ArrowRight, CreditCard } from "lucide-react" interface AccountItem { id: string title: string description?: string balance: string type: "savings" | "checking" | "investment" | "debt" } interface List01Props { totalBalance?: string accounts?: AccountItem[] className?: string } const ACCOUNTS: AccountItem[] = [ { id: "1", title: "Main Savings", description: "Personal savings", balance: "$8,459.45", type: "savings", }, { id: "2", title: "Checking Account", description: "Daily expenses", balance: "$2,850.00", type: "checking", }, { id: "3", title: "Investment Portfolio", description: "Stock & ETFs", balance: "$15,230.80", type: "investment", }, { id: "4", title: "Credit Card", description: "Pending charges", balance: "$1,200.00", type: "debt", }, { id: "5", title: "Savings Account", description: "Emergency fund", balance: "$3,000.00", type: "savings", }, ] export default function List01({ totalBalance = "$26,540.25", accounts = ACCOUNTS, className }: List01Props) { return (

{/* Total Balance Section */}

Total Balance

{totalBalance}

{/* Accounts List */}

Your Accounts

{accounts.map((account) => (

{account.type === "savings" && ( )} {account.type === "checking" && } {account.type === "investment" && ( )} {account.type === "debt" && }

{account.title}

{account.description && (

{account.description}

)}

{account.balance}

))}

{/* Updated footer with four buttons */}

) } [V0_FILE]typescriptreact:file="components/kokonutui/list-02.tsx" isMerged="true" import { cn } from "@/lib/utils" import { ArrowUpRight, ArrowDownLeft, Wallet, ShoppingCart, CreditCard, type LucideIcon, ArrowRight, } from "lucide-react" interface Transaction { id: string title: string amount: string type: "incoming" | "outgoing" category: string icon: LucideIcon timestamp: string status: "completed" | "pending" | "failed" } interface List02Props { transactions?: Transaction[] className?: string } const categoryStyles = { shopping: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100", food: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100", transport: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100", entertainment: "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100", } const TRANSACTIONS: Transaction[] = [ { id: "1", title: "Apple Store Purchase", amount: "$999.00", type: "outgoing", category: "shopping", icon: ShoppingCart, timestamp: "Today, 2:45 PM", status: "completed", }, { id: "2", title: "Salary Deposit", amount: "$4,500.00", type: "incoming", category: "transport", icon: Wallet, timestamp: "Today, 9:00 AM", status: "completed", }, { id: "3", title: "Netflix Subscription", amount: "$15.99", type: "outgoing", category: "entertainment", icon: CreditCard, timestamp: "Yesterday", status: "pending", }, { id: "4", title: "Apple Store Purchase", amount: "$999.00", type: "outgoing", category: "shopping", icon: ShoppingCart, timestamp: "Today, 2:45 PM", status: "completed", }, { id: "5", title: "Supabase Subscription", amount: "$15.99", type: "outgoing", category: "entertainment", icon: CreditCard, timestamp: "Yesterday", status: "pending", }, { id: "6", title: "Vercel Subscription", amount: "$15.99", type: "outgoing", category: "entertainment", icon: CreditCard, timestamp: "Yesterday", status: "pending", }, ] export default function List02({ transactions = TRANSACTIONS, className }: List02Props) { return (

Recent Activity (23 transactions)

This Month

{transactions.map((transaction) => (

{transaction.title}

{transaction.timestamp}

{transaction.type === "incoming" ? "+" : "-"} {transaction.amount} {transaction.type === "incoming" ? ( ) : ( )}

))}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" export function ThemeToggle() { const [mounted, setMounted] = React.useState(false) const { theme, setTheme } = useTheme() React.useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return ( ) } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], theme: { extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" import Dashboard from "@/components/kokonutui/dashboard" export default function DashboardPage() { return } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "KokonutUI Dashboard", description: "A modern dashboard with theme switching", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" import { redirect } from "next/navigation" export default function Home() { redirect("/dashboard") } [V0_FILE]typescriptreact:file="components/kokonutui/dashboard.tsx" isEdit="true" isQuickEdit="true" import Content from "./content" import Layout from "./layout" export default function Dashboard() { return ( ) }

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This